<template>
	<view class="">
		<u-popup :show="show" round="12rpx" mode="center" :safeAreaInsetBottom='false'>
			<view class="hint bgf br12">
				<view class="hinta flex_c cf fw500 fs36" :style="[bgColor]">{{hint}}</view>
				<view class="mt40 flex_y c3 fw500 fs30">{{title}}</view>
				<view class="hint_btn flex_btw fs28">
					<view class="hint_btna br10 flex_c c23" :style="[cancelColor]" @click="cancel">取消</view>
					<view class="hint_btna br10 flex_c bg23 cf" :style="[bgColor]" @click="affirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>

	<!-- 使用 
		<hintPopup :show.sync="show" hint='确认修改' title='你确认要修改店铺信息吗？' color="#2A71C0" @confirm='confirm'></hintPopup>
		 说明：确认弹窗
	-->


</template>

<script>
	/*
	 *theme 主题颜色
	 */
	export default {
		props: {
			hint: {
				default: "温馨提示",
			},
			title: {
				default: "请确认下架？",
			},
			show: {
				typeof: Boolean,
				default: false,
			},
			color: {
				typeof: String,
				default: '#23D371',
			}
		},
		components: {},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			cancel() { //取消
				this.$emit('update:show', false)
			},
			affirm() {
				this.$emit('confirm')
			}
		},
		computed: {
			bgColor() {
				return {
					background: this.color
				}
			},
			cancelColor() {
				return {
					'border-color': this.color,
					 color: this.color
				}
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.hint {
		width: 520upx;
		height: 378upx;
		overflow: hidden;

		.hinta {
			height: 124upx;
		}

		.hint_btn {
			margin: 73upx 30upx 0 30upx;

			.hint_btna {
				width: 200upx;
				height: 72upx;
				border: 2upx solid #fff;
			}
		}
	}
</style>
